<script setup>
import {ref,computed} from 'vue'
const rankIndex = ref(0);
const props = defineProps({
  tabs:{
    type:Array,
    required:true
  }
})
const emits = defineEmits(['select'])

const widthStyle =computed(()=>{
  const l = props?.tabs?.length;
  return {
    width: l ? `${(100/l)}%` : ""
  }
})
const onSelectChange = (item,index) => {
  rankIndex.value = index;
  emits('select',item)
}
</script>

<template>
  <div class="filter-tab">
    <div v-for="(item,index) in tabs"
         class="tab" :style="widthStyle"
         :class="{'active':rankIndex===index}"
         @click="onSelectChange(item,index)"
    >
      <div class="tab_txt">{{item.name}}</div>
      <div class="positioning"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.filter-tab {
  display: flex;
  justify-content: center;
  background: #fff;
  //border:1px solid red;

  .tab {
    //width: 187px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //border:1px solid red;
    &.active {
      .tab_txt{
          height: 25px;
          mix-blend-mode: normal;
          text-align: center;
          color: rgba(247, 51, 45, 1);
          font-family: PingFangSC-Medium;
          font-weight: 450;
          font-size: 18px;
          line-height: 25px;
      }
      .positioning {
        visibility: visible;
      }
    }

    .tab_txt {
        transition: color 0.3s;
        height: 22px;
        mix-blend-mode: normal;
        text-align: center;
        color: rgba(108, 110, 122, 1);
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
    }

    .positioning {
      visibility: hidden;
      width: 18px;
      height: 6px;
      background: url("../assets/images/icon_positioning_active@3x.png") no-repeat center center / cover;
    }
  }

}
</style>